<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        #box1{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;
            padding-top: 100px;
        }
    </style>
</head>
<body>

<!--
    事件执行的过程
      1.  事件捕获阶段
      2.  事件执行阶段
      3.  事件冒泡阶段

   阻止事件的默认行为  冒泡

   解决以上的问题  可以使用vue中提供的事件修饰符
   1. 鼠标事件修饰符
      .stop    阻止冒泡行为
      .self  只监听自己的事件行为
      .once  事件一次有效
      .prevent  阻止默认行为
   2. 键盘事件修饰符
      keydown
      keyup
      keypress

     .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right

-->

<div id="app">
    <div id="box1" @click="clickDiv">
        <button @click.once="clickBtn" >单击</button>
    </div>
    <a href="http://www.baidu.com" @click.prevent="clickA">baidu</a>
    <input type="text" @keydown.enter="showInfo">请输入信息</input>
</div>


<script>

    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            clickDiv(){
                console.log("click div")
            },
            clickBtn(){
                console.log("click button")
            },
            clickA(){
                console.log("click a")
            },
            showInfo(){
                console.log("键盘按键被按下...")
            }
        }
      })

</script>

</body>
</html>